<%@ page pageEncoding="UTF-8" %>
<%@ include file="common/global.jsp" %>
<head>
    <%@ include file="common/meta.jsp" %>
    <title><f:message key="common.title"/> - <f:message key="menu.sample_pages.Reports"/></title>
    <%@ include file="common/css.jsp" %>
    <link rel="stylesheet" href="${BASE}/www/css/ui-lightness/jquery-ui-1.8.21.custom.css">
    <link rel="stylesheet" href="${BASE}/www/js/plugins/cirque/cirque.css">
    <link rel="stylesheet" href="${BASE}/www/css/pages/reports.css">
</head>

<body>

<div id="wrapper">


<%@ include file="common/topbar.jsp" %>
<%@ include file="common/header.jsp" %>

<div id="masthead">

    <div class="container">

        <div class="masthead-pad">

            <div class="masthead-text">
                <h2>Reports</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div> <!-- /.masthead-text -->

        </div>

    </div> <!-- /.container -->

</div> <!-- /#masthead -->
<div id="content">

    <div class="container">


        <div class="row">

            <div class="span12">

                <div id="big_stats" class="cf">

                    <div class="stat">
                        <div class="report-cirque" data-value="1630" data-arc-color="#2790B0"></div>
                        <h4>Pending Sales Today</h4>
                    </div> <!-- .stat -->

                    <div class="stat">
                        <div class="report-cirque" data-value="3480" data-arc-color="#94BA65" data-label="ratio"></div>
                        <h4>Completed Sales Today</h4>
                    </div> <!-- .stat -->

                    <div class="stat">
                        <div class="report-cirque" data-value="1650" data-arc-color="#4074AA"></div>
                        <h4>Something Else</h4>
                    </div> <!-- .stat -->

                    <div class="stat">
                        <div class="report-cirque" data-value="870" data-arc-color="#CC0000" data-label="ratio"></div>
                        <h4>Returned Items Today</h4>
                    </div> <!-- .stat -->

                </div> <!-- /#big_stats -->

            </div> <!-- /.span12 -->

        </div> <!-- /.row -->



        <div class="row">

            <div class="span6">

                <h3>Bar Charts</h3>

                <hr />

                <div id="vertical-chart" class="chart-holder"></div> <!-- /#vertical-chart -->
            </div> <!-- /.span6 -->

            <div class="span6">

                <h3>Pie Chart</h3>

                <hr />

                <div id="pie-chart" class="chart-holder"></div> <!-- /#pie-chart -->

            </div> <!-- /.span6 -->

        </div> <!-- /.row -->



        <div class="row">

            <div class="span4">

                <h3>Top Referrers</h3>

                <table class="table table-bordered table-striped">

                    <thead><tr>
                        <th>Referrer</th>
                        <th>Uniques</th>
                    </tr></thead>

                    <tbody><tr>
                        <td class="description"><a href="http://google.com">http://google.com</a></td>
                        <td class="value"><span>1123</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="http://yahoo.com">http://yahoo.com</a></td>
                        <td class="value"><span>927</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="http://themeforest.net">http://themeforest.net</a></td>
                        <td class="value"><span>834</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="http://codecanyon.net">codecanyon.net</a></td>
                        <td class="value"><span>625</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="http://madebyamp.com">http://madebyamp.com</a></td>
                        <td class="value"><span>593</span></td>
                    </tr>

                    </tbody></table>

            </div> <!-- /.span4 -->



            <div class="span4">

                <h3>Top Browsers</h3>

                <table class="table table-bordered table-striped">

                    <thead><tr>
                        <th>Browser</th>
                        <th>Visits</th>
                    </tr></thead>

                    <tbody><tr>
                        <td class="description">Firefox</td>
                        <td class="value"><span>1123</span></td>
                    </tr>
                    <tr>
                        <td class="description">Chrome</td>
                        <td class="value"><span>927</span></td>
                    </tr>
                    <tr>
                        <td class="description">Internet Explorer</td>
                        <td class="value"><span>834</span></td>
                    </tr>
                    <tr>
                        <td class="description">Safari</td>
                        <td class="value"><span>625</span></td>
                    </tr>
                    <tr>
                        <td class="description">Opera</td>
                        <td class="value"><span>593</span></td>
                    </tr>

                    </tbody></table>

            </div> <!-- /.span4 -->



            <div class="span4">

                <h3>Top Visited</h3>

                <table class="table table-bordered table-striped">

                    <thead><tr>
                        <th>Page</th>
                        <th>Visits</th>
                    </tr></thead>

                    <tbody><tr>
                        <td class="description"><a href="javascript:;">Carbon Admin</a></td>
                        <td class="value"><span>1123</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="javascript:;">Mega Dropdown</a></td>
                        <td class="value"><span>927</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="javascript:;">DropUI Buttons</a></td>
                        <td class="value"><span>834</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="javascript:;">Azure Admin</a></td>
                        <td class="value"><span>625</span></td>
                    </tr>
                    <tr>
                        <td class="description"><a href="javascript:;">NoticeUI</a></td>
                        <td class="value"><span>593</span></td>
                    </tr>

                    </tbody></table>

            </div> <!-- /.span4 -->

        </div> <!-- /.row -->


    </div> <!-- /.container -->

</div> <!-- /#content -->

</div> <!-- /#wrapper -->



<%@ include file="common/footer.jsp" %>
<%@ include file="common/js.jsp" %>
<script src="${BASE}/www/js/plugins/excanvas/excanvas.min.js"></script>
<script src="${BASE}/www/js/plugins/cirque/cirque.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.orderBars.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="${BASE}/www/js/Charts.js"></script>
<script src="${BASE}/www/js/demos/demo.reports.js"></script>
<script src="${BASE}/www/js/demos/charts/vertical.js"></script>
<script src="${BASE}/www/js/demos/charts/pie.js"></script>



<script>
    $(function () {
        Theme.init ();
        $("#nav3").addClass("active").sibling.removeClass("active");
    });
</script>

</body>
</html>